{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:layout name="FCE" />

<f:section name="Configuration">
	<flux:form wizardTab="Blandes"  label="Blandes: Gallery" id="gallery" icon="{v:extension.path.resources(path: 'Icons/favicon.ico')}">
		<flux:field.input name="columns" default="4" label="Number of columns" />
		<flux:field.inline.fal name="images" label="Images" collapseAll="1"  multiple="1" maxItems="100" />
	</flux:form>
</f:section>

<f:section name="Preview">
	<h2>{images} images</h2>
</f:section>

<f:section name="Main">

<div class="portfolio">
	<ul  class="portfolio-items portfolio-style3 portfolio-with-padding-yes filterable-items row-fluid style1" data-columns="{columns}">
	<f:for each="{v:content.resources.fal(field: 'images')}" as="img" iteration="i">
		<li class="portfolio-item span4 ">
		<div class="inner-content">
		  <div class="image hoverlay">
			<a href="{f:cObject(typoscriptObjectPath: 'lib.mask', data: '{img.url}')}" class="fancybox featured-image" rel="grouped"> 
				<f:image 
					src="{img.uid}" 
					treatIdAsReference="1"
					width="360c" 
					height="300c" 
					alt="{img.title}" />
			</a>
		  </div>
		</div>
		</li>
	</f:for>
	</ul>
</div>

</f:section>